﻿<template>

    <div>

        <NavTop/>

        <div style="width: 1400px;margin: auto;">

            <el-table

                ref="multipleTableRef"

                :data="filteredCartData"

                style="width: 100%"

                @selection-change="handleSelectionChange"

            >

                <el-table-column type="selection" :selectable="selectable" width="55" />

                <el-table-column property="id" label="商品名称" width="120" />

                <el-table-column property="name" label="商品名称" width="520" />

                <el-table-column property="onlineprice" label="价格" />

                <el-table-column property="num" label="数量" />

                <el-table-column property="total" label="总金额" />



                <el-table-column align="right">

                    <template #header>

                        <el-input v-model="search" size="small" placeholder="搜索" />

                    </template>

                    <template #default="scope">

                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">

                        删除

                        </el-button>

                    </template>

                </el-table-column>

            </el-table>

            <div>

                <el-button @click="buy()">购买</el-button>

            </div>

        </div>

    </div>

</template>



<script>

import NavTop from '@/components/NavTop.vue';

import { useGoodsStore } from '@/store/goods';

import { ElMessage, ElMessageBox } from 'element-plus';

export default {

    components:{

        NavTop

    },

    data() {

        return {

            multipleTableRef:null,

            multipleSelection:[],

            store:useGoodsStore(),

            cartData:JSON.parse(sessionStorage.getItem('cart')),

            time:new Date(),

            orderID:'',

            search: ''

        }

    },

    computed: {

        filteredCartData() {

            if (this.search) {

                return this.cartData.filter(item => {

                    // 假设我们根据商品名称和商品 ID 进行搜索，你可以根据需要修改搜索条件

                    return item.name.includes(this.search) || item.id.includes(this.search);

                });

            } else {

                return this.cartData;

            }

        }

    },

    methods: {

        handleSelectionChange(val){

            this.multipleSelection=val

        },

        handleDelete(index){

            ElMessageBox.confirm(

                '你确定要删除此商品吗?',

                '警告',

                {

                confirmButtonText: '确认',

                cancelButtonText: '取消',

                type: 'warning',

                }

            )

               .then(() => {

                    this.cartData.splice(index,1)//把当前行数据进行删除，主意，我们只是在数组里面进行删除，sessionStorage里面没有变化

                    //更新session里面的数据

                     sessionStorage.setItem('cart',JSON.stringify(this.cartData))

                })

               .catch(() => {

                ElMessage({

                    type: 'info',

                    message: '删除取消',

                })

                })

        },

        buy(){

            if(this.multipleSelection==''){

                ElMessageBox.alert('请选择购买商品！', '警告', {

                confirmButtonText: '好的',

                callback:()=>{

                    ElMessage({

                        type: 'info',

                        message: '添加失败',

                    })

                }

            })

            }else{

                this.orderID=this.time.getFullYear().toString()+(this.time.getMonth()+1).toString()+

            this.time.getDate().toString()+Math.random().toString().slice(2,10)

            console.log(this.orderID);

            //统计商品的总金额和总数量

            let num=0

            let sum=0

            //从选中的商品中遍历循环，把每个商品的数量和金额进行相加

            this.multipleSelection.map(v=>{

                num+=v.num;

                sum+= v.num * v.onlineprice;

            })

            //打印检查数据是否正确

            console.log("num"+num)

            console.log("sum"+sum)

            //把相关的数据添加到store中的订单数组里面

            this.store.orderAdd({

                orderID:this.orderID,

                time:this.time,

                num:num,

                sum:sum,

                isOrdered:false,//这个变量用来记录本订单是否已经完成支付

                child:[...this.multipleSelection]//展开运算符，通常用来把一个数组逐一进行操作，相当于进行了循环

            })

            console.log(this.store.orderData)



            ElMessageBox.alert('以加入订单，请到订单页面结账！', '温馨提示', {

                confirmButtonText: '好的',

                callback:()=>{

                    ElMessage({

                        type: 'info',

                        message: '添加成功',

                    })

                }

            })

            }

            //打印订单号，看看是否OK

            

            //商品加入订单后要在购物车中进行删除

            this.multipleSelection.forEach((list)=>{

                let x=this.cartData.findIndex((item)=>list.id==item.id)

                this.cartData.splice(x,1)

                sessionStorage.setItem('cart',JSON.stringify(this.cartData))

            })

        }

    },

}

</script>